<body style="width: 100vw;
    height: 100vh;
    background-color: rgb(29, 67, 89)">
<style>
    panel{
        width: 300px;
    padding: 20px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    position: relative; /* 使用相对定位 */
    left: 50px; /* 距离左边缘50像素 */
    top: 20px; /* 距离顶部20像素 */
    }
</style>

<div style="display: flex; justify-content: center; align-items: center; height: 100%;">
    <div style="width: 1200px; height: 700px; background-color: white; border: 1px solid #ccc; display: flex; justify-content: center; align-items: center;">
        <div class="panel panel-color panel-danger panel-pages panel-shadow">
            <div class="panel-heading bg-img">
                <div class="bg-overlay"></div>
                <h3 class="text-center m-t-10"> Login My Blog</h3>
            </div>
            <div class="panel-body">
                <form class="form-horizontal m-t-20" method="post" id="loginForm" onsubmit="return checkForm()">
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input class="input-lg input-border" name="username" type="text" required=""
                                   placeholder="账号:"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <input class="input-lg input-border" name="password" type="password" required=""
                                   placeholder="密码:"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-xs-12">
                            <div class="checkbox checkbox-danger">
                                <input id="checkbox-signup" name="remeber_me" type="checkbox"/>
                                <label for="checkbox-signup">记住我</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group text-center m-t-40">
                        <div class="col-xs-12">
                            <button class="btn btn-danger btn-lg btn-rounded btn-block w-lg waves-effect waves-light" style="box-shadow: 0px 0px 4px #868282;" type="submit">登&nbsp;录
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Main  -->
<script th:src="@{//cdn.bootcss.com/jquery/2.2.3/jquery.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.js}"></script>
<script th:src="@{/admin/js/base.js}"></script>
<script type="text/javascript">
    /*<![CDATA[*/
    var tale = new $.tale();
    function checkForm() {
        tale.post({
            url: '/admin/login',
            data: $("#loginForm").serialize(),
            success: function (result) {
                if (result && result.success) {
                    window.location.href = '/admin/index';
                } else {
                    tale.alertError(result.msg || '登录失败');
                }
            }
        });
        return false;
    }
    /*]]>*/
</script>
</body>
